extend personLeft.pug

block append pageStyle
	link(href='${relativePath}/static/css/personCenter/personData.css' type="text/css" rel="stylesheet")
	link(href='${relativePath}/static/css/personCenter/application.css' type="text/css" rel="stylesheet")
	link(href='${relativePath}/static/css/personCenter/personIndex.css' type="text/css" rel="stylesheet")
	link(href="${relativePath}/static/css/shopping/foundation.min.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/foundation-datepicker.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/personCenter/account.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/rightOrder.css" rel="stylesheet" type="text/css")
	link(href='${relativePath}/static/css/personCenter/myShop.css' type="text/css" rel="stylesheet")

block personRight
	div.rightContent.fl
		//- 切换内容
		div.tab-content
			div.detail-box.cpcl 成品材料添加
						div.allcontent.cpclallcontent
							div.upImgbtns.clear
								span.cpName.fl 商品图片：
								div.cpclUp.fl
									input(type="hidden",name="horder_img")
									div#cupfile.fl
										form#uploadForm
											div.hz_photo.hupimg-div.clear
												section.hz_file.clear
													a.fl(href="#") 重新上传
													input(type="file" name="file" id="corderImg" class="hfile" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="multiple")
							div.inpBoxs
								div.row.crow.fl
									label.oneLabel.fl 一级分类：
									select.fl.cSelect
										option 成品材料
								div.row.crow.fl
									label.oneLabel.fl 商品名称：
									input.ctxt(type="text" placeholder="请输入商品名称")
							div.inpBoxs
								div.row.crow.fl
									label.oneLabel.fl 二级分类：
									select.fl.cSelect.ejSele
										option 请选择
								div.row.crow.fl
									label.oneLabel.fl 单位：
									input.ctxt(type="text" placeholder="请输入单位")
							div.inpBoxs
								div.row.crow.fl
									label.oneLabel.fl 三级分类：
									select.fl.cSelect.sjSele
										option 请选择
							//- div.inpBoxs
							//- 	div.row.crow.fl
							//- 		label.oneLabel.fl 同步至公司：
							//- 		div.selCompanys.fl
							//- 			label.company-name
							//- 				input(type="checkbox")
							//- 				|  河南标识汇网络有限公司
							//- 产品规格
							div.inpBoxs
								div.row.fl
									label.oneLabel.fl 产品规格：
									div.specBox
										//- a.spec-btn(href="javascript:;") 颜色
							
							//- 价格
							div.inpBoxs#detail
								div.row.fl
									label.oneLabel.fl 价格：
									div.priceSpec.fl
										div.list
											span 红色+4cm+1cm
											input.price.pprice(type="text" placeholder="请输入价格1（APP、电脑端）")
											input.price.lprice(type="text" placeholder="请输入价格2（小程序）,不填默认价格1")
										div.list
											span 红色+4cm+1cm
											input.price.pprice(type="text" placeholder="请输入价格1（APP、电脑端）")
											input.price.lprice(type="text" placeholder="请输入价格2（小程序）,不填默认价格1")
							//- 产品详情
							div.inpBoxs
								div.row.fl
									label.oneLabel.fl 产品详情：
									div
										textarea(name="content" style="width:680px;height:350px;visibility:hidden;" id="content")
							a(href="javascript:;").subBtn 提交保存
	//- 颜色模板
	script#spec-tpl-c(type="text/html")
		div.specLists
			div.inpBoxs
				div.row.fl
					label.oneLabel.fl 颜色：
					div.colorList.fl
						| {{each data as item}}
						lable.icolor
							input.color(type="checkbox" name="color")
							| {{item.name}}
						| {{/each}}
	//- 其他规格
	script#spec-tpl-o(type="text/html")
		div.specLists
			div.inpBoxs
				label.oneLabel.fl 厚度：
				div.rightSpeclist.fl
					| {{each data as item}}
					a.spec-btn(href="javascript:;") {{item.name}}
					| {{/each}}
block append pageScript
	script(type="text/javascript" src="${relativePath}/static/js/jquery.validate.min.js")
	script(type="text/javascript" src="${relativePath}/static/js/messages_zh.js")
	script(type="text/javascript" src="${relativePath}/static/js/card.js")
	script(type="text/javascript" src="${relativePath}/static/js/kindeditor/kindeditor-all-min.js")
	script(type="text/javascript" src="${relativePath}/static/js/kindeditor/lang/zh-CN.js")
	script(type="text/javascript" src="${relativePath}/static/js/kindeditor/plugins/code/prettify.js")
	

	script.
		
		$(function(){
			//- 当前选中
			$("#myShop").addClass("current").siblings("li").removeClass("current");
			$(".ywc").removeClass("current");
			$(".realRZ").removeClass('current')
			//- 图片上传
			$("input#corderImg").on("change", function() {
				var wrap = $(this).closest(".hupimg-div");
				doUpload_img(this.files[0], function(data) {
					var imgUrl = $("input[name='horder_img']").val();
					if(imgUrl) {
						$("input[name='horder_img']").val(imgUrl + "," + data.data.path);
					} else {
						$("input[name='horder_img']").val(data.data.path);
					}
					wrap.prepend("<span class='imgwarp'><img src='"+data.data.url+"' path='"+data.data.path+"' class='upimgs'></img><i></i></span>");
					if($("span.imgwarp img.upimgs").length > 7) {
						$("#horderImg").hide();
						$(".hz_file").hide();
					}
				});
			});
			//- 上传图片
			function doUpload_img(file, callback) {
				var formdata=new FormData($("#uploadForm")[0])
				//console.log(formdata);
				$.ajax({
					url:shopIp+"/Utils/uploadFiles?userToken="+token,
					type:"post",
					data:formdata,
					dataType:"json",
					async:false,
					cache:false,
					contentType:false,
					processData:false,
					success:function(data) {
						//alert(data.msg);
						//console.log(data.data.path);
						//$(".hiddenTxt").val(data.data.path);
						callback(data);
					},
					error:function(data) {
						layer.msg(data.msg);
					}
				})
			}
			//- 点击删除图片
			$(".hz_photo").on("click",".imgwarp i",function() {
				$(this).closest(".imgwarp").remove();
				$(".hz_file").show();
			})
			function getejKinds() {
				$.post(shopIp+'/category/homePageList',{
					userToken:token,
					category_id:4
				},function(res) {
					var list = res.data
					for(var i=0;i<list.length;i++) {
						var ele = "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
						$(".ejSele").append(ele)
					}
				})
			}
			console.log($(".ejSele").val())
			$(".ejSele").change(function() {
				var $this = $(this).val()
				//- 获取三级分类
				$.post(shopIp+'/category/getSubCates',{
					userToken:token,
					parent_id:$this
				},function(res){
					var list = res.data
					for(var i=0;i<list.length;i++) {
						var ele = "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
						$(".sjSele").append(ele)
					}
				})
			})
			$(".sjSele").change(function() {
				var $this = $(this).val()
				if($(".ejSele").val() == '请选择') {
					layer.msg('请先选择二级分类')
				}else{
					getSpec($this)
				}
			})
			//- 获取对应三级分类的规格
			function getSpec(id) {
				$.post(shopIp+'/goods/getSpecList',{
					userToken:token,
					id:id
				},function(res) {
					$(".specBox").empty()
					var list = res.data
					for(var i=0;i<list.length;i++) {
						var ele = '<a class="spec-btn" spec="'+list[i].id+'" href="javascript:;">'+list[i].name+'</a>' 
						$(".specBox").append(ele)
					}
				})
			}
			//- 点击选择规格
			function chioce(id,or) {
				var $this = $(this)
				$.post(shopIp+'/goods/getSpecLists',{
					userToken:token,
					spec_id:id
				},function(res) {
					// 根据类型拼接规则的HTML
					var html ;
					if(id == 150) {				
						// 把拼接好的HTML添加到产品详情元素上面
						html = template("spec-tpl-c", res)
					}else{
						html = template("spec-tpl-o", res)
					}
					$("div#detail").before(html);
				})
			}
			$(".specBox").on('click','.spec-btn',function() {
				var $this = $(this).attr('spec')
				$(this).toggleClass('current')
				chioce($this,$(this))
				if($this.hasClass)
			})
			getejKinds()
			//- 当前成品材料显示
			$(".cpcl").show()
			//- 编辑器
			KindEditor.ready(function(K) {
				K.create('textarea[name="content"]', {
					cssPath : '${relativePath}/static/js/kindeditor/plugins/code/prettify.css',
					uploadJson : '/unified/uploadFiles',
					//- fileManagerJson : '/kindEditor/Manager',
					allowFileManager : true,//是否允许浏览服务器上传文件
					//resizeType : 0,是否可改变编辑器大小0不可以，1可改高度，2都可以。默认为2
					afterCreate : function(msg) {
						var self = this;
						K.ctrl(document, 13, function() {
							self.sync();
							document.forms['example'].submit();
						});
						K.ctrl(self.edit.doc, 13, function() {
							self.sync();
							document.forms['example'].submit();
						});
					}
				});
				prettyPrint();
			});
		})


